<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" style="height: 100%;">
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.type','类型')">
                            <a-select :placeholder="i18n('form.type','类型')" :options="typeDatas" v-model="type"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-if="type=='relative'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.relaValue','相对值')">
                            <a-input :addon-before="i18n('form.today','今天')" readOnly v-model="defaultValue">
                                <template slot="addonAfter">
                                    <a-icon type="minus" @click="addDate(-1)" />
                                    <a-icon type="plus" @click="addDate(1)" />
                                </template>
                            </a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-else-if="type=='fixed'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1"  :label="i18n('form.time','准确时间')">
                            <a-date-picker v-model="dateValue" :format="format"></a-date-picker>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-else-if="type=='script'">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1"  :label="i18n('form.script','编写脚本')">
                            <rx-monaco-editor  ref="javaCode"
                                               v-model="localScript"
                                               style="height:310px;"
                                               language="javascript">
                                <span slot="monacoeditor">
                                    <mini-query-script-vars @insertScript="insertJavaCode" />
                                </span>
                            </rx-monaco-editor>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </rx-layout>

</template>

<script>
    import {RxLayout,RxMonacoEditor} from "@lowcode/jpaas-common-lib"
    import miniQueryScriptVars from "./miniQueryScriptVars";
    export default {
        name: "miniQuery_datepickerConfig",
        props: ["layerid", "destroy"],
        components:{
            RxLayout,
            RxMonacoEditor,
            miniQueryScriptVars
        },
        data() {
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },
                labelCol1: { span:3 },
                wrapperCol1: { span:19 },
                form: this.$form.createForm(this),
                format:"YYYY-MM-DD",
                type:"",
                typeDatas:[
                    {value:"relative",label:this.i18n('form.relaValue','相对值')},
                    {value:"fixed",label:this.i18n('form.absoValue','绝对值')},
                    {value:"script",label:this.i18n('form.script1','脚本')}
                ],
                defaultValue:'+0' + this.i18n('form.days','天'),
                dateValue:"",
                localScript:""
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            validate(callback){
                var self=this;
                this.form.validateFields((err, values) => {
                    if(err){
                        return;
                    }
                    callback();
                });
            },
            setData(row){
                this.type=row.type || "relative";
                if(this.type=='relative'){
                    this.defaultValue=row.defaultVal ||'+0' + this.i18n('form.days','天');
                }else if(this.type=='fixed'){
                    if(row.defaultVal) {
                        this.dateValue = moment(row.defaultVal, this.format);
                    }
                }else if(this.type=='script'){
                    this.localScript=row.setting;
                }
            },
            getData(){
                var data={type:this.type};
                if(this.type=='relative'){
                    data['defaultVal']=this.defaultValue;
                    data['setting']=this.defaultValue;
                }else if(this.type=='fixed'){
                    if(this.dateValue){
                        data['defaultVal']=this.dateValue.format(this.format);
                        data['setting']=this.dateValue.format(this.format);
                    }
                }else if(this.type=='script'){
                    data['setting']=this.localScript;
                }
                return data;
            },
            addDate(amount) {
                var num = this.defaultValue.substring(0, this.defaultValue.length-1);
                num = parseInt(num) + amount;
                var numStr = (num >= 0 ? "+" + num : num)+this.i18n('form.days','天');
                this.defaultValue = numStr;
            },
            insertJavaCode(text){
                this.$refs.javaCode.insertContent(text);
            }
        }
    }
</script>

<style scoped>

</style>